<template>
  <div class="advert">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="handleEdit()" size="small">添加广告位</el-button>
      </div>
      <el-table
        :data="spaceList"
        v-loading="loading"
        style="width: 100%">
        <el-table-column prop="spaceKey" label="spaceKey" min-width="150"></el-table-column>
        <el-table-column prop="name" label="广告位名称" min-width="150"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="150"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" min-width="150"></el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="添加广告位" :visible.sync="dialogVisible" width="600px">
      <el-form :model="adSpace" :rules="rules" ref="form">
        <el-form-item label="广告位名称" prop="name" label-width="100px">
          <el-input v-model="adSpace.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSaveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getAllSpaces, saveOrUpdateAd } from '@/services/ads'
import dayjs from 'dayjs'

export default Vue.extend({
  name: 'MenuIndex',
  data () {
    return {
      spaceList: [],
      loading: true,
      dialogVisible: false,
      adSpace: {
        id: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入广告位名称', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.loadAllSpaces()
  },

  methods: {
    async loadAllSpaces () {
      const { data } = await getAllSpaces()
      if (data.success === true) {
        this.spaceList = data.content.map((item: any) => {
          item.createTime = dayjs(item.createTime).format('YYYY-MM-DD hh:mm:ss')
          item.updateTime = dayjs(item.updateTime).format('YYYY-MM-DD hh:mm:ss')
          return item
        })
        this.loading = false
      }
    },

    handleEdit (item: any) {
      this.dialogVisible = true
      if (item) {
        this.adSpace = {
          id: item.id,
          name: item.name
        }
      }
    },

    onSaveOrUpdate () {
      const form: any = this.$refs.form
      if (form) {
        form.validate(async (valid: any) => {
          if (valid) {
            const { data } = await saveOrUpdateAd(this.adSpace)
            if (data.success === true) {
              this.$message({ type: 'success', message: '修改成功！' })
              this.loadAllSpaces()
              this.dialogVisible = false
            } else {
              this.$message({ type: 'error', message: '修改失败！' })
            }
          }
        })
      } else {
        console.log('error submit!!')
        this.$message({ type: 'warning', message: '请先填写完整！' })
        return false
      }
    }
  }
})
</script>

<style lang="scss">
.advert{
  .el-table{
    th,td{
      text-align: center;
    }
  }
  .el-card{
    .el-card__body{
      padding-top: 0;
    }
  }
  .el-image{
    width: 100px;
    height: 100px;
    font-size: 25px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.03);

    .el-image__inner{
      height: auto;
    }
    img{
      height: auto;
    }
  }
}

</style>
